import styled from "@emotion/styled";
import { Tabs } from "antd";

interface TabItem {
    tab: string
    key: string
}

export interface PageTabsParams {
    onChange: (activeKey: string) => void
    tabs: Array<TabItem>
}

const PageTabs = ({ tabs, onChange }: PageTabsParams) => {
    return <TabContainer defaultActiveKey={tabs[0].key} onChange={onChange}>
        {tabs.map(item => {
            return <Tabs.TabPane style={{marginBottom: 0}} tab={item.tab} key={item.key} />
        })}
    </TabContainer>
}

const TabContainer = styled(Tabs)`
    background-color: #FFFFFF;
    margin-top: 2px;
    padding-left: 10px;
`

export default PageTabs